<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button-group>
        <goBack></goBack>
        <el-button  type="primary" @click="fahandleGenerate">
         生成方案
        </el-button>
        <el-button type="primary" @click="handleAdd">
          点击重新上传
        </el-button>
        
      </el-button-group>
      <el-table :data="fanganList" style="width: 100%" stripe highlight-current-row>
        <el-table-column type="index" min-width="100">
        </el-table-column>
        <el-table-column prop="name" label="文件名">
          <template slot-scope="scope">
            <div class="firedownload" @click="fileDownload(scope.row)">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="上传时间">

        </el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            
          </template>
        </el-table-column>
      </el-table>
    </el-col>

    <el-col :span="24">
      <el-card class="box-card">
        <div slot="header" class="clearfix subtab_tit">
          <span>历史上传记录</span>
        </div>
        <el-table :data="historyList" stripe style="width: 100%" highlight-current-row>
          <el-table-column type="index" min-width="100">
          </el-table-column>
          <el-table-column prop="name" label="文件名">
            <template slot-scope="scope">
              <div class="firedownload" @click="fileDownload(scope.row)">{{scope.row.name}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="上传时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="130">
            <template slot-scope="scope">
              <el-button @click.native.prevent="handleDel(scope.$index, scope.row)" icon="el-icon-delete" size="small" type="danger"> </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>

    <el-dialog title="文件上传" :visible.sync="isUploadShow" :close-on-click-modal="false">
      <div class="inner">
        <el-upload ref="elupload" class="upload" drag :action="importFileUrl" :data="upLoadData" :limit="1" :headers="httpHeaders" :auto-upload="false" :beforeUpload="beforeAvatarUpload" :onSuccess="uploadSuccess">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">
            <el-button @click="uploadAction" slot="tip" type="primary">上传</el-button>
            <p>只能上传txt/word/excel文件</p>
          </div>
        </el-upload>
      </div>
    </el-dialog>
    <!-- <UploadShow @uploadAction="uploadAction" @beforeAvatarUpload="beforeAvatarUpload"></UploadShow> -->
  </section>
</template>
<script>
import NProgress from "nprogress";
import { getToken } from "@/utils/auth";
import goBack from "@/components/public/goback";
import UploadShow from "@/components/public/UploadShow";
export default {
  components: {
    goBack,
    UploadShow
  },
  data() {
    return {
      fanganList: [],
      historyList: [],
      isUploadShow: false,
      httpHeaders: {
        Authorization: getToken()
      },
      importFileUrl: "/files/upload",
      upLoadData: {
        projectid: this.$route.params.projectid,
        type: 1
      }
    };
  },
  methods: {
    uploadAction() {
      this.$confirm("确认提交吗？", "提示", {})
        .then(() => {
          this.$refs.elupload.submit();
        })
        .catch(e => {});
    },
    fileDownload(row) {
      window.open("/" + row.dir);
    },

    // 生成方案
    fahandleGenerate() {
      this.$confirm("确认生成word文档吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.listLoading = true;
        NProgress.start();
        let params = {
          projectid: this.$route.params.projectid,
        };
        this.axios.post("/analysis/plan", params).then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            this.$confirm("生成成功! 确定现在下载？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                window.open(
                  "/uploads/" + this.$route.params.projectid + ".docx"
                );
                this.$message({
                  type: "success",
                  message: "下载成功!"
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消下载"
                });
              });
          } else {
            this.$message({
              message: `生成失败，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
      });
    },

    // 上传方案
    handleUpdateStatus(index, row) {},

    //验证方案历史列表
    getfanganList() {
      this.listLoading = true;
      NProgress.start();
      this.axios
        .get("/projects/" + this.$route.params.projectid, {
          params: {}
        })
        .then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            if (reply.data.data.fanganfileObject != null) {
              // debugger;
              let fanganfileJSON = reply.data.data.fanganfileObject;
              this.fanganList = [];
              this.fanganList.push(fanganfileJSON.file);
              this.historyList = fanganfileJSON.list;
            }
          } else {
            this.$message({
              message: `查询出错5，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
    },
    //删除
    handleDel: function(index, row) {
      this.$confirm("确认删除该历史文件吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.listLoading = true;
        NProgress.start();
        let params = {
          projectid: this.$route.params.projectid,
          uuid: row.uuid
        };
        this.axios.post("/files/delete", params).then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success"
            });
            this.getfanganList();
          } else {
            this.$message({
              message: `删除失败，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
      });
    },
    //上传对话框显示
    handleAdd() {
      this.isUploadShow = true;
    },
    //文件检查
    beforeAvatarUpload(file) {
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const extension3 = file.name.split(".")[1] === "doc";
      const extension4 = file.name.split(".")[1] === "docx";
      const extension5 = file.name.split(".")[1] === "txt";
      if (
        !extension &&
        !extension2 &&
        !extension3 &&
        !extension4 &&
        !extension5
      ) {
        this.$message({
          message: "上传模板只能是 xls、xlsx、doc、docx、txt 格式!",
          type: "warning"
        });
      }
      return extension || extension2 || extension3 || extension4 || extension5;
    },

    uploadSuccess(response, file, fileList) {
      this.uploading = false;
      if (response.status == 0) {
        this.$refs.elupload.clearFiles();
        this.isUploadShow = false;
        this.getfanganList();
        this.$notify({
          type: "success",
          message: "文件上传成功",
          offset: 40
        });
      } else {
        return this.$message({ type: "error", message: "上传失败" });
      }
    }
  },
  mounted() {
    this.getfanganList();
  }
};
</script>
<style lang="scss" scoped>
.subtable thead {
  color: #909399;
  font-weight: 500;
}
.subtable td,
.subtable th .is-leaf {
  border-bottom: 1px solid #ebeef5;
}
.subtable th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.firedownload {
  cursor: pointer;
  color: #409eff;
}
</style>


